<template>
  <div id="room-detail">
    <header></header>
    <div class="room-box clear">
      <img
        src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg"
        alt=""
      />
      <div class="room-info clear">
        <div class="room-title pub">
          <h2>{{ roomTitle }}</h2>
        </div>
        <div class="room-desc pub">{{ roomDesc }}</div>
        <div class="room-price pub">
          <span class="priceTag">¥{{ roomPrice }}</span> / 晚
        </div>
        <div class="room-status pub">
          <i class="el-icon-s-home"> {{ roomShuliang }} 间卧室</i>
          <i class="el-icon-moon-night"> {{ bedNum }} 张床</i>
          <i class="el-icon-ship"> {{ wcNum }} 间卫生间</i>
          <i class="el-icon-s-custom"> 可住 {{ peoples }} 人</i>
        </div>
        <div class="pub score-box">
          <el-rate
            v-model="roomScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </div>
        <div class="room-tag pub clear">
          <div class="tag-list comment-box">{{ roomComment }}条评论</div>
          <div class="tag-list">免费停车</div>
          <div class="tag-list">可以做饭</div>
          <div class="tag-list">允许吸烟</div>
        </div>

        <div class="room-expand">
          <div class="expand-box">
            <span class="expand-tag1">整个房源</span>
            <span class="expand-tag2">独享所有空间，无需与他人共用</span>
          </div>
          <div class="expand-box">
            <span class="expand-tag1">入住/退房</span>
            <span class="expand-tag2"
              >入住时间 上午10:00后、退房时间 中午12:00</span
            >
          </div>
          <div class="expand-box">
            <span class="expand-tag1">取消政策</span>
            <span class="expand-tag2"
              >4月7日上午10点入住前取消，退还全部清洁费，不退还房费<span
                class="span-check-detail"
                @click="dialogVisible = true"
                >查看详情</span
              ></span
            >
          </div>
        </div>
      </div>
      <div class="room-order">
        <div class="order-div price-box">
          <span class="price-span">￥{{ roomPrice }}</span>
          <span> / 晚</span>
        </div>
        <div class="order-div discount-box">
          <i class="el-icon-loading active-discount icon-discount"></i>
          <span>新房特惠8折</span>
          <i class="el-icon-loading icon-discount"></i>
          <span>春季特惠8.5折</span>
          <i class="el-icon-loading icon-discount"></i>
          <span>周租优惠7.9折</span>
        </div>
        <div class="score-box2">
          <el-rate
            v-model="roomScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
          <div class="order-line"></div>
          <div class="order-date">
            <el-date-picker
              size="mini"
              v-model="valueDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="order-submit">
            <button class="order-submit-btn">立即预定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="desc-of-box clear">
      <div class="desc-box">
        <div class="pl-left">
          <div class="pl-title">用户评论</div>
          <div class="pl-main">
            <!-- 在这里渲染评论 -->
            <div class="pl-header">
              <div class="touxiang-box">
                <img class="pl-touxiang" src="../image/logo.png" />
              </div>
              <div class="pl-name">
                {{ plUserName }}
              </div>
              <div class="pl-date">
                {{ plDate }}
              </div>
            </div>
            <div class="pl-text">
              <p>{{ plText }}</p>
            </div>
            <div class="pl-img-box">
              <img class="pl-img" src="../image/logo.png" />
            </div>
          </div>
          <div class="pl-main">
            <!-- 在这里渲染评论 -->
            <div class="pl-header">
              <div class="touxiang-box">
                <img class="pl-touxiang" src="../image/logo.png" />
              </div>
              <div class="pl-name">
                {{ plUserName }}
              </div>
              <div class="pl-date">
                {{ plDate }}
              </div>
            </div>
            <div class="pl-text">
              <p>{{ plText }}</p>
            </div>
            <div class="pl-img-box">
              <img class="pl-img" src="../image/logo.png" />
            </div>
          </div>
        </div>
        <div class="introduce-box clear">
          <div class="introduc-list clear">
            <span class="introduc-span1">超赞房东</span>
            <span class="introduc-span2"
              >超赞房东经验丰富、评分很高，致力于为房客提供优质的住宿体验。</span
            >
          </div>
          <div class="introduc-list">
            <span class="introduc-span1">安全须知</span>
            <span class="introduc-span2"
              >在新冠肺炎疫情期间，我们要求所有房东和房客查看并遵守爱彼迎的社交距离准则和其他新冠肺炎疫情相关准则。
              未报告装有一氧化碳报警器 已配备烟雾报警器</span
            >
          </div>
          <div class="introduc-list">
            <span class="introduc-span1">安全预定</span>
            <span class="introduc-span2"
              >为了保护您的账号隐私及付款安全，请勿妄信第三方预订代理提供的折扣或礼金券，也不要在爱彼迎网站或App之外汇款或沟通</span
            >
          </div>
          <div class="introduc-list">
            <span class="introduc-span1">发票须知</span>
            <span class="introduc-span2"
              >如有需要，请联系房东。</span
            >
          </div>
          <div class="introduc-list">
            <span class="introduc-span1">房屋守则</span>
            <span class="introduc-span2"
              >请爱惜房屋电器家具等设备，如有损坏，照价赔偿</span
            >
          </div>
        </div>
      </div>
    </div>

    <!--  弹出框 -->
    <div class="dialog-box">
      <el-dialog :visible.sync="dialogVisible" width="50%">
        <el-steps :active="stepActive" finish-status="success">
          <el-step title="今日下午两点前可免费取消"></el-step>
          <el-step title="申请退款"></el-step>
          <el-step title="退款到账"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        <span slot="footer" class="dialog-footer">
          <button class="dialog-btn" type="primary" @click="closeDialog()">
            OK
          </button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roomTitle: "Daan qu, 自贡市, 中国单一家庭住宅", //商品标题
      roomDesc: "房源可靠，先到先得", //商品描述
      roomPrice: "2555", //商品价格
      roomShuliang: 2, //卧室数量
      bedNum: 3, //床数量
      wcNum: 1, //卫生间数量
      peoples: 4, //可住人数
      roomScore: 4.5, //房间评分
      roomComment: 3, //房间评论
      dialogVisible: false,
      stepActive: 0,
      valueDate: "", //日期
      plDate: "2021/12/11", //评论日期
      plUserName: "张三", //评论姓名
      plText:
        "房子位置很好,离田子坊不到两公里,去外滩打车也只要十几块钱,点外卖也很方便,关键是装修很温馨｡房主也非常好,当时电视放不出来还特地找人来修,不过房子挺小,感觉这个价钱有一点贵,总体来说非常满意｡", //评论内容
    };
  },
  methods: {
    next() {
      if (this.stepActive++ > 2) this.stepActive = 0;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.stepActive = 0;
    },
  },
  components: {},
};
</script>

<style lang="scss">
body{
  overflow-x: hidden;
}
#room-detail {
  width: 1280px;
  margin: 0 auto;
  background-color: white;

  .clear::before,
  .clear::after {
    content: "";
    display: block;
  }
  .clear::after {
    clear: both;
  }
  .room-box {
    width: 1280px;
    img {
      margin-left: 10px;
      width: 400px;
      height: 400px;
      object-fit: cover;
      float: left;
    }
  }
  .lit-of-pl {
    width: 100%;
    box-sizing: border-box;
    border: 5px solid rgb(14, 91, 73);
  }
  .room-info {
    width: 40%;
    float: left;
    text-align: left;
    .pub {
      margin-top: 10px;
      margin-left: 8%;
      .priceTag {
        color: rgb(14, 91, 73);
        font-size: 30px;
        font-weight: 700;
      }
    }
  }
  .room-status {
    i {
      margin-left: 1%;
      border: 1px solid black;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      padding: 3px 6px;
    }
  }
  .room-tag {
    display: block;
    .tag-list {
      float: left;
      margin-left: 1%;
      border-radius: 4px;
      background-color: rgb(235, 232, 232);
      padding: 3px 6px;
      font-size: 14px;
      cursor: pointer;
      font-weight: 600;
    }
  }

  .comment-box {
    background-color: rgb(162, 230, 182) !important;
    color: rgb(3, 92, 30);
  }
  .room-desc {
    font-weight: 600;
  }
  .room-expand {
    margin-top: 20px;
    margin-left: 8%;
    .expand-box {
      margin-bottom: 10px;
    }
  }
  .expand-tag1 {
    font-weight: 600;
    display: block;
    float: left;
    margin-right: 4%;
  }
  .expand-tag2 {
    font-size: 14px;
    margin-left: 3%;
    display: block;
  }
  .span-check-detail {
    color: rgb(14, 189, 14);
    font-weight: 600;
    cursor: pointer;
    // display: block;
  }
  .dialog-btn {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    outline: none;
    color: white;
    background-color: rgb(12, 179, 137);
  }
  .dialog-box {
    .el-button {
      background-color: rgb(12, 179, 137);
      color: white;
    }
  }
  .room-order {
    width: 23%;
    margin-left: 2%;
    margin-top: 50px;
    height: 300px;
    border: 1px solid rgb(156, 154, 154);
    border-radius: 5px;
    float: left;
    text-align: left;
    box-shadow: 2px 2px 2px #bdb8b8;
  }
  .price-box {
    margin-top: 20px;
    margin-left: 3%;
  }
  .discount-box {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 3%;
  }
  .price-span {
    color: rgb(14, 91, 73);
    font-weight: 700;
    font-size: 30px;
  }
  .icon-discount {
    font-weight: 600;
  }
  .active-discount {
    color: rgb(139, 10, 53);
  }
  .score-box2 {
    margin-left: 3%;
    margin-top: 10px;
  }
  .order-line {
    width: 90%;
    border: 1px solid rgb(184, 182, 182);
    margin-left: 3%;
    margin-top: 20px;
  }
  .order-date {
    margin-top: 20px;
    margin-left: 3%;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 260px;
  }
  .order-submit {
    margin-top: 30px;
    .order-submit-btn {
      width: 90%;
      margin-left: 3%;
      height: 35px;
      cursor: pointer;
      border-radius: 5px;
      border: 2px solid rgb(8, 172, 76);
      outline: none;
      color: white;
      font-size: 18px;
      font-weight: 600;
      background-color: rgb(12, 179, 137);
    }
  }
  .order-submit-btn:hover {
    background-color: white;
    color: rgb(12, 179, 137);
  }
  .desc-box {
    overflow: hidden;
  }
  .pl-left {
    width: 40%;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 1%;
    float: left;
  }
  .pl-title {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
  }
  .pl-header {
    overflow: hidden;
  }
  .touxiang-box {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    float: left;
  }
  .pl-name {
    float: left;
    margin-top: 20px;
    margin-left: 2%;
    color: rgb(14, 91, 73);
    font-weight: 600;
  }
  .pl-touxiang {
    width: 100%;
  }
  .pl-date {
    float: right;
    margin-right: 3%;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
  }
  .pl-text {
    padding: 5px 10px;
    width: 90%;
    margin-left: 2%;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-indent: 20px;
    border: 3px solid rgb(37, 184, 149);
    border-radius: 10px;
  }
  .pl-img-box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 20px;
    margin-top: 20px;
    margin-left: 3%;
    margin-bottom: 20px;
  }
  .pl-img {
    width: 100%;
  }
  .introduce-box {
    float: left;
    width: 50%;
    margin-top: 20px;
    /* position: fixed;
    left: 43%; */
  }
  .introduc-list {
    margin-top: 10px;
    display: block;
  }
  .introduc-span1 {
    float: left;
    margin-left: 5%;
    font-weight: 600;
    display: block;
    margin-top: 10px;
  }
  .introduc-span2 {
    float: left;
    margin-left: 5%;
    display: block;
    width: 75%;
    text-align: left;
    margin-top: 10px;
  }
}
</style>
